{% extends "base.html" %}

{% block meta %}
    <meta name="menu-tag" content="41"/>
    <style>
        #tblHeader td {
            max-width: 100px !important;
            text-align: center;
            font-weight: bold
        }
        #tblBody td a{
            display: inline-block; 
            height: 100%; 
            width: 100%;
            text-decoration: none;
            opacity: 100%;
        }
        .legend {
            margin: 5px 10px;
            display: inline-block;
            width: 100px;
            height: 30px;
        }
    </style>
{% end block %}

{% block main %}
<div class="container" >
    <ol class="breadcrumb">
        <li><a href='/classes'>实验班级</a></li>
        <li class="active">作业</li>
    </ol>
    <div class="page-header">
        <h4>
            <strong id="lblClassName"></strong>-作业提交情况
        </h4>
        <p>
            <span class="legend bg-success">&nbsp;</span>教师已评分
            <span class="legend bg-info">&nbsp;</span>学生已提交
        </p>
    </div>
    <div class="container">
        <table class="table table-bordered">
            <thead>
                <tr id="tblHeader" class="bg-primary">
                    <td style="width: 70px">
                        <a href="#">&nbsp;</a>
                    </td>
                </tr>
            </thead>
            <tbody id="tblBody">
                
            </tbody>
        </table>
    </div>
</div>
{% end block %}


{% block script %}
<script src='{{static_url("js/dateformat.js") }}'></script>

<script type="text/javascript">
    var classid = {{classid}};

    function Student(accountname, truename){
        var self = this;
        self.classid = classid;
        self.accountname = accountname;
        self.truename = truename;
        self.assignments = ko.observableArray();
    }

    function Assignment(assignmentid, labid, labname, labcode, labfile, submitted, reviewed){
        var self = this;
        self.assignmentid = assignmentid;
        self.labid = labid;
        self.labname = labname;
        self.labcode = labcode;
        self.labfile = labname;
        self.submitted = submitted ? true : false;
        self.reviewed = reviewed ? true : false;
    }

    function ModelView(){
        var self = this;
        self.students = ko.observableArray();
    }

    var modelView = new ModelView();
    ko.applyBindings(modelView);
    var courseAssignments;
    var classStudents;
    var class_assignments;

    $(document).ready(function(){
        className = window.location.href.substr(window.location.href.lastIndexOf('classname=') + 'classname='.length);
        $("#lblClassName").html(unescape(className));

        var queryData = {
            'operation' : 'get_class_assignments', 
            'operand' : {
                'classid' : classid
            }
        };
        $.ajax({
            url : '/class_assignments', 
            type : 'post',
            data : JSON.stringify(queryData),
            dataType : 'json',
            success : function(jsonResult){
                if (!jsonResult.success){
                    return;
                }
                courseAssignments = jsonResult.data.course_assignments;
                classStudents = jsonResult.data.class_students;
                class_assignments = jsonResult.data.class_assignments;
                generateTable();
            }
        })
    });

    function generateTable(){
        var tblHeader = $("#tblHeader");
        var tblBody = $("#tblBody");

        // 构建表格标题栏
        for(var i=0;i<courseAssignments.length;i++){
            item = courseAssignments[i];
            $("<td title='" + item.labname + "'>#" + (i+1) + "</td>").appendTo(tblHeader);
        }
        // 构建每个数据行
        for(var i=0;i<classStudents.length;i++){
            student = classStudents[i];
            var tr = $("<tr></tr>").appendTo(tblBody);
            $("<td class='bg-primary' title='" + student.truename + "'>" + student.accountname + "</td>").appendTo(tr);
            
            for(var j=0;j<courseAssignments.length;j++){
                assignment = courseAssignments[j];
                td = $("<td></td>").appendTo(tr);
                
                // 检查该生该作业的提交和评分情况
                var result = class_assignments.find(function(item, index){
                    return (item.accountname == student.accountname) && (item.labcode == assignment.labcode);
                });
                if (result){            // 对于已经提交了作业的学生，可以进入其作业界面查看
                    $("<a target='_blank' href='/class_assignments?accountname=" + student.accountname + "&labcode=" + assignment.labcode + "'>&nbsp;</a>")
                        .appendTo(td);
                    if (result.reviewed){
                        td.addClass('bg-success');
                    } else{
                        td.addClass('bg-info');
                    }
                }
            }
        }
    }
</script>
{% end block %}
